.container{
    // padding: 1rem;
    margin: 0 auto;
    @media screen and (max-width:576px) {
        width: 100%;
        .row{
            display: grid;
            grid-template-columns: repeat(12,1fr);
            @for $i from 1 to 13 {
                .col-#{$i}{
                    grid-column: span #{$i};
                }
            }
        }
    }
    @media screen and (min-width:576px) {
        width: 540px;
        .row{
            display: grid;
            grid-template-columns: repeat(12,1fr);
            gap:1rem;
            @for $i from 1 to 13 {
                .col-sm-#{$i}{
                    grid-column: span #{$i};
                }
            }
        }
    }
    @media screen and (min-width:768px) {
        width: 720px;
        .row{
            display: grid;
            grid-template-columns: repeat(12,1fr);
            gap:1rem;
            @for $i from 1 to 13 {
                .col-md-#{$i}{
                    grid-column: span #{$i};
                }
            }
        }
    }
    @media screen and (min-width:992px) {
        width: 960px;
        .row{
            display: grid;
            grid-template-columns: repeat(12,1fr);
            gap:1rem;
            @for $i from 1 to 13 {
                .col-lg-#{$i}{
                    grid-column: span #{$i};
                }
            }
        }
    }
    @media screen and (min-width:1200px) {
        width: 1140px;
        .row{
            display: grid;
            grid-template-columns: repeat(12,1fr);
            gap:1rem;
            @for $i from 1 to 13 {
                .col-xl-#{$i}{
                    grid-column: span #{$i};
                }
            }
        }
    }
    
}